<template>
	<view class="content">
		<view class="headerBox" :style="{'background':getRgb(templateConfig.page.themeColor,0.8)}">
			<view class="title">可用余额</view>
			<view class="money"><text>¥</text>{{ userInfo.balance}}</view>
			<view class="tips" @click="Topath('/packageA/user/rechargerecord')">消费&充值记录</view>
		</view>
		<view class="moneyBox">
			<view class="header">余额充值</view>
			<view v-if="ruleList.length>0" class="radioBox">
				<radio-group class="listBox" @change="radioChange">
					<label class="list" v-for="(item, index) in ruleList" :key="index">
						<view class="title">¥{{item.rechargeMoney}}</view>
						<view class="info"><text>送</text>¥{{item.giveeMoney}}</view>
						<radio :checked="payMoney==item.rechargeMoney?true:false" :value="item.rechargeMoney"
							:color="template.color.temp_color" />
					</label>
				</radio-group>
			</view>
			<view class="other">
				<view class="title">其它</view>
				<input type="digit" v-model="payMoney" placeholder="请输入充值金额" />
				<view class="info">元</view>
			</view>
			<view class="button" @click="getRechargeOrder()" :style="{'background':templateConfig.page.themeColor}">确认充值
			</view>
			<u-popup :show="show"  mode='center' round="15" :safeAreaInsetBottom='false'>
			            <view style="padding:60rpx 40rpx;">
			                <view>授权手机号方可使用余额充值功能，是否授权？</view>
							<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-top: 60rpx;">
								<button class="contactBtn" style="color: #000;" @click="show=false">取消</button>
								<button class="contactBtn" :style="{'background':templateConfig.page.themeColor}" open-type="getPhoneNumber" @getphonenumber="getBindWechatPhoneTap">授权</button>
							</view>
			            </view>
					</u-popup>
		</view>



	</view>
</template>

<script>
	import {
		appletsWechatOrderPay,
		searchUserInfoById,
		getPlugsConfigInfo,
		partnerAppletsWechatOrderPay,
		getRecommen,getWeChartUserPhone,
		updateUserInfo 
	} from '../../static/utils/api.js';
	import { getRgb } from '../../static/utils/utils.js';
		
	
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				openId: uni.getStorageSync('openId'),
				userInfo: uni.getStorageSync('userInfo'),
				nowBusinessInfo: {},
				show: false,
				userDetails: {
					moneys: 0,
					score: 0
				},
				moneyNumber: '',
				payList: '',
				ruleList: [],
				rechargeOrder: '',
				BgcImg: '',
				integral: 0,
				current: '',
				payMoney: '',
				balance: 0,
				recommendedList:[]
			}
		},
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
			this.getInfo()
		},
		onLoad() {
			let that = this;
			// that.gethomeInfo();
			// that.getInfo();
			that.getSelectList();
		},
		methods: {
			getRgb,
			Topath(route) {
				uni.navigateTo({
					url: route
				})
			},
			radioChange(e) {
				this.payMoney = e.detail.value;
			},
			getSelectList() {
				let that = this;
				getPlugsConfigInfo({
					id: 173
				}).then(res => {
					if (res.code == 200&&res.body) {
						that.ruleList = JSON.parse(res.body.plugsConfigJson);
					}
				})
			},

			getInfo() {
				let data = {
					userId: uni.getStorageSync('userInfo').id
				}
				searchUserInfoById(data).then(res => {
					if (res.code == 200) {
						this.userInfo = res.body;
					}
				})
			},
			// 获取轮播
			getswiperList() {
				let data = {
					businessId: this.nowBusinessInfo.businessId.toString()
				};
				getRecommen(data).then(res => {
					if (res.code == 200) {
						let arr1 = [];
						
						arr1 = res.body.filter(itm => itm.type === 'recharge');
						
						this.recommendedList = [...arr1];
					}
				});
			},
			getRechargeOrder() {
				let that = this;
				
				
				
				if(!that.payMoney){
					uni.showToast({
						icon:'none',
						title:'请输入或选择充值金额'
					})
					return
				}
				if(!that.userInfo.mobile||that.userInfo.mobile==0){
					that.show=true
				}else{
					
					let postData = {
						"client": "小程序",
						"openId": that.openId,
						"payMoney": that.payMoney,
						"payWay": 1,
						"payType": 2,
						"businessId": that.nowBusinessInfo.businessId.toString()
					}
					uni.showLoading({
						title: '支付准备中',
						mask: true
					});
					
					partnerAppletsWechatOrderPay(postData).then(res => {
						if (res.code == 200) {
							let payList = res.body
							let data = res.body;
							uni.hideLoading();
							wx.requestPayment({
								appId: payList.appid,
								nonceStr: payList.noncestr,
								package: payList.package,
								signType: 'RSA',
								timeStamp: payList.timestamp,
								paySign: payList.sign,
								success: function(res) {
									uni.hideLoading();
									uni.showToast({
										title: '微信支付成功'
									});
									that.getInfo();
									uni.navigateBack()
								},
								fail: function(err) {
									uni.hideLoading();
									uni.showModal({
										title: '支付失败',
										content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
										showCancel: false
									});
									return;
								}
							});
						}
					})
				}
				
			},
			getBindWechatPhoneTap(e) {
				uni.showLoading({
					title: '授权中',
					mask: true
				});
				let wechatServerJSON = {
					code: e.detail.code
				};
				let data = {
					wechatServerJSON: JSON.stringify(wechatServerJSON)
				};
				getWeChartUserPhone(data).then((res) => {
					if (res.code == 200) {
						console.log(res.body);
						this.userInfo.mobile = res.body.phone_info.purePhoneNumber;
						updateUserInfo({mobile:this.userInfo.mobile}).then(ues => {
							if (ues.code == 200) {
								uni.hideLoading();
								uni.showToast({
									title: '授权成功'
								});
								this.show=false
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}
	.contactBtn {
		width: 200rpx;
		border: none;
		font-size: 30rpx;
		padding: 0rpx;
		color: #fff;
	}
	.headerBox {
		width: 96%;
		height: 350rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		background-color: #ffde59;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		position: relative;
		justify-content: center;

		.title {
			font-size: 28rpx;
			color: #1f1f1f;
			font-weight: bold;
		}

		.money {
			font-size: 80rpx;
			font-weight: bold;
			display: flex;
			align-items: flex-end;
			padding-bottom: 20rpx;
			color: #fff;

			text {
				font-size: 40rpx;
				padding-right: 8rpx;
				padding-bottom: 20rpx;
			}
		}

		.tips {
			color: #1f1f1f;
			font-size: 26rpx;
			position: absolute;
			bottom: 50rpx;
			opacity: .6;
		}
	}

	.moneyBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		justify-content: center;

		.header {
			color: #1f1f1f;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: bold;
		}
		.radioBox{
			width: 85%;
		}
		.listBox {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 100%;

			.list {
				width: 260rpx;
				display: flex;
				flex-direction: column;
				border: 2rpx solid #efefef;
				margin-bottom: 30rpx;
				justify-content: center;
				padding-left: 20rpx;
				position: relative;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				border-radius: 10rpx;

				.title {
					font-size: 36rpx;
					color: #F54319;
					font-weight: bold;
				}

				.info {
					color: #999;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						padding-right: 4rpx;
					}
				}

				radio {
					position: absolute;
					right: 20rpx;
					zoom: 0.8;
				}
			}
		}

		.other {
			width: 85%;
			display: flex;
			border: 2rpx solid #efefef;
			height: 80rpx;
			align-items: center;
			margin: 0 auto;
			border-radius: 10rpx;

			.title {
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				height: 100%;
				background-color: #efefef;
			}

			input {
				flex: 1;
				height: 100%;
				display: flex;
				padding-left: 20rpx;
				color: #1f1f1f;
			}

			.info {
				width: 100rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1f1f1f;
				background-color: #efefef;
			}
		}

		.button {
			width: 85%;
			height: 90rpx;
			margin: 0 auto;
			background-color: #6da7de;
			color: #fff;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			border-radius: 10rpx;

			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
</style>